<template>
	<view class="test-check">
		<view v-if="[2, 3,4, 6].includes(deviceInfo.step)" class="top-content"
			:style="deviceInfo.step === 6 ? 'margin-top: 90rpx;' : ''">
			<template v-if="deviceInfo.step && deviceInfo.step === 2">
				<image v-if="deviceInfo.image && deviceInfo.step" class="step-image" :class="`step-${deviceInfo.step}`"
					:src="`/static/img/${deviceInfo.image}`" mode="aspectFit" />
				<view v-if="deviceInfo.imageDesc" class="image-desc">{{ deviceInfo.imageDesc }}</view>
			</template>
			<template v-if="deviceInfo.step && deviceInfo.step === 3">
				<image v-if="deviceInfo && deviceInfo.step" class="step-image" :class="`step-${deviceInfo.step}`"
					:src="`/static/img/${deviceInfo.image}`" mode="aspectFit" />
				<view v-if="deviceInfo.imageDesc" class="image-desc">{{ deviceInfo.imageDesc }}</view>
			</template>

			<template v-else-if="deviceInfo.step && deviceInfo.step === 4">
				<view class="reading-data" style="font-size: 50rpx;">已匹配到配套试剂批次信息</view>
				<image class="countdown_1"  src="/static/img/UDI.png" />

				<view class="device-number">生产日期：{{deviceInfo.shengchanshijian}}</view>
				<view class="device-number">有效期至：{{ deviceInfo.youxiaoqizhi }}</view>
				<view class="device-number">试剂批号：{{ deviceInfo.shijipihao }}</view>
			</template>

			<template v-else-if="deviceInfo.step && deviceInfo.step === 6">
				<countDown ref="down" :times='times' @endTime='endTime' @pause='pauseNum'></countDown>
				<image class="countdown" src="/static/img/step-countdown.png" />
				<view v-if="time === -1" class="reading-data small">正在检测加样，请确认完成加样操作......</view>
				<view v-else class="reading-data">数据读取中</view>
				<!-- <view class="device-number">电子检测盒编号：{{ deviceNumber }}</view> -->
				<view class="device-number">阅读仪编号：{{ deviceNumber }}</view>
			</template>
		</view>
		<view v-else-if="deviceInfo.step === 1" class="content multi">
			<image class="content-bg" src="/static/img/content-bg.png" />
			<view class="container">
				<image class="down-arrow" src="/static/img/down.png" />
				<view v-for="item in deviceInfo.steps" :key="item.name" class="step-item">
					<view v-if="item.imageDesc" class="image-desc">{{ item.imageDesc }}</view>
					<template v-if="item.content && item.content.length">
						<view class="step-name">{{ item.name }}</view>
						<view class="step-desc">
							<view v-for="(v, index) in item.content" :key="index" class="desc">{{ v }}</view>
						</view>
					</template>
					<image v-if="item.image && item.step" class="step-image" :class="`step-${item.imageNum}`"
						:src="`/static/img/${item.image}`" mode="aspectFit" />
				</view>
				<view v-if="deviceInfo.step === 1" class="scan-btn-wrap">
					<button class="scan-btn" @click="onNext">{{ deviceInfo.operateName }}</button>
				</view>
				<!--       <view v-if="deviceInfo.step === 1" class="scan-btn-test">-->
				<!--          <view class="btn-content">-->
				<!--            <view class="btn-text">{{ deviceInfo.operateName }}</view>-->
				<!--            <view class="flex">-->
				<!--              <view class="scan-btn" @click="onScanNext(0)"></view>-->
				<!--              <view class="scan-btn" @click="onScanNext(1)"></view>-->
				<!--            </view>-->
				<!--          </view>-->
				<!--        </view>-->
			</view>
		</view>
		<view v-else-if="deviceInfo.step !== 3 &&deviceInfo.step !== 4" class="content"
			:class="[2, 6, 7].includes(deviceInfo.step) ? 'short' : ''">
			<image class="content-bg" src="/static/img/content-bg.png" />
			<view class="container">
				<view v-if="![2, 3, 4,6, 7].includes(deviceInfo.step)" class="image-wrap">
					<!-- <image v-if="[5].includes(deviceInfo.step)" class="arrow-left" src="/static/img/arrow-left.png" @click="onBack" /> -->
					<!-- <image v-if="[4].includes(deviceInfo.step)" class="arrow-right" src="/static/img/arrow-right.png" @click="onNext" /> -->
					<image v-if="deviceInfo.image && deviceInfo.step" class="step-image"
						:class="`step-${deviceInfo.step}`" :src="`/static/img/${deviceInfo.image}`" mode="aspectFit" />
					<view v-if="deviceInfo.imageDesc" class="image-desc">{{ deviceInfo.imageDesc }}</view>
				</view>
				<view v-else-if="deviceInfo.step && deviceInfo.step === 7" class="result-wrap">
					<template v-if="deviceInfo.result === 0">
						<image class="result-image" src="/static/img/step-result-normal.png" />
						<view class="result-text">无反应</view>
					</template>
					<template v-else-if="deviceInfo.result === 1">
						<image class="result-image" src="/static/img/step-result-responsive.png" />
						<view class="result-text">有反应</view>
					</template>
					<template v-else-if="deviceInfo.result === 2">
						<image class="result-image" src="/static/img/step-result-invalid.png" />
						<view class="result-text">检测无效</view>
					</template>
					<view class="device-number">设备编号：{{ deviceNumber }}</view>
				</view>
				<template v-if="deviceInfo.content && deviceInfo.content.length">
					<view v-if="deviceInfo && deviceInfo.step" class="step-name"
						:style="deviceInfo.step === 7 ? 'margin-top: 100rpx;' : ''">
						{{ deviceInfo.contentTitle || deviceInfo.name }}</view>
					<view class="step-desc">
						<view v-for="(item, index) in deviceInfo.content" :key="index" class="desc">{{ item }}</view>
					</view>
				</template>
			</view>
		</view>


		<button v-if="deviceInfo.step !== 1 &&deviceInfo.step !== 4&& deviceInfo.operateName" type="warn"
			class="next-btn" :class="deviceInfo.step === 3 ? 'white' : ''"
			@click="onNext">{{ deviceInfo.operateName }}</button>
		<button v-if="deviceInfo.step == 4&& deviceInfo.operateName" type="warn" class="next-btn_1"
			@click="onNext">{{ deviceInfo.operateName }}</button>
	</view>

</template>

<script>
	import countDown from '@/components/countDown/countDown.vue'
	export default {
		name: 'TestCheck',
		components: {
			countDown
		},
		props: {
			info: {
				type: Object,
				default: () => {}
			},
			deviceNumber: {
				type: String,
				default: ''
			},
			time: {
				type: Number,
				default: 0
			}
		},
		watch: {
			info: {
				handler(val) {
					console.log('info', val)
					this.deviceInfo = val
					this.$nextTick(() => {
						this.$forceUpdate()
					})
				},
				immediate: true
			},
			time(val) {
				if (this.info && this.info.step === 6) {
					if (val === -1) {
						this.times = 0
					} else if (val > 0) {
						// 让倒计时组件动起来的测试代码
						this.times = val
						console.log('剩余时间', this.times)
						this.startCounting()
					}
				}
			}
		},
		data() {
			return {
				times: 0,
				currentTime: 100,
				deviceInfo: {}
			}
		},
		onLoad(op) {},
		methods: {
			update() {
				this.$forceUpdate()
			},
			onBack() {
				this.$emit('back')
			},
			onScanNext(tag) {
				// if ([0, 1].includes(tag)) {
				// }
				uni.setStorageSync('testResult', tag)
				this.$emit('next')
				const testResult = uni.getStorageSync('testResult')
				console.log('testResult', testResult, typeof testResult)
			},
			onNext() {
				this.$emit('next')
			},
			async startCounting() { //开始事件
				console.log('剩余时间', this.times)
				this.getReset()
				this.$refs.down.start()
			},
			pause() { //暂停
				this.$refs.down.pause()
			},
			pauseNum(e) { //暂停时返回剩余时间
				console.log('剩余时间：', e);
			},
			goOn() { //继续
				this.$refs.down.goOn()
			},
			endTime() { //结束
				console.log('结束');
			},
			getReset() { //重置
				if (this.$refs.down) {
					this.$refs.down.reset()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.test-check {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
	}

	.top-content {
		height: 700rpx;

		.step-image {
			margin-top: 96rpx;
		}
	}

	.content {
		position: relative;
		height: 100%;
		padding-top: 12rpx;
		box-sizing: border-box;
		overflow: scroll;
		background-color: #F5F7FB;

		&.multi {
			height: auto;

			.container {
				padding-top: 55rpx;
				margin-bottom: 150rpx;

				.step-item {
					margin-bottom: 90rpx;

					&:last-of-type {
						padding-bottom: 50rpx;
					}
				}

				.step-name {
					text-align: left;
					width: 627rpx;
					margin: 0 auto;
				}
			}
		}

		&.short {
			margin-top: 76rpx;

			.step-name {
				padding-left: 73rpx;
				padding-top: 70rpx;
				font-size: 31rpx;
				text-align: left;
			}
		}

		.container {
			width: 100%;
			height: 100%;
			background-color: #F5F7FB;
			border-top-left-radius: 38rpx;
			border-top-right-radius: 38rpx;
			position: relative;

			.down-arrow {
				width: 28rpx;
				height: 48rpx;
				position: fixed;
				top: 500rpx;
				right: 50rpx;
			}
		}

		.image-wrap {
			height: 650rpx;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			padding: 0 100rpx;
		}

		.content-bg {
			position: absolute;
			width: 100%;
			z-index: 0;
			top: 0;
			left: 0;
		}

		.arrow-left {
			width: 24rpx;
			height: 28rpx;
			position: absolute;
			left: 38rpx;
			top: 400rpx;
		}

		.arrow-right {
			width: 24rpx;
			height: 28rpx;
			position: absolute;
			right: 38rpx;
			top: 400rpx;
		}

		.step-name {
			text-align: center;
			font-size: 46rpx;
			font-weight: bold;
			color: #333333;
			line-height: 54rpx;
			margin-bottom: 26rpx;
		}

		.step-desc {
			width: 627rpx;
			margin: 0 auto;
			font-size: 27rpx;
			font-weight: 400;
			line-height: 40rpx;
			color: rgba(51, 51, 51, 0.6);
			padding: 30rpx 0;
		}

		.success-name {
			margin-top: 30rpx;
			font-size: 54rpx;
			font-weight: bold;
			color: #323232;
			line-height: 64rpx;
			text-align: center;
		}

		.success-info {
			margin-top: 38rpx;
			font-size: 36rpx;
			font-weight: normal;
			color: #323232;
			line-height: 60rpx;
			text-align: center;
		}
	}

	.step-image {
		width: 100%;
		display: block;
		margin: auto;

		&.step-5 {
			width: 438rpx;
			height: 438rpx;
		}

		&.step-6 {
			width: 404rpx;
			height: 441rpx;
		}
	}

	.image-desc {
		margin-top: 48rpx;
		font-weight: 400;
		text-align: center;
		font-size: 46rpx;
		color: #FFFFFF;
		line-height: 46rpx;
	}

	.countdown {
		margin: 28px auto;
		width: 350rpx;
		height: 350rpx;
		display: block;
	}
	.countdown_1{
		margin: 28px auto;
		width: 490rpx;
		height: 490rpx;
		display: block;
	}

	.reading-data {
		margin-top: 65rpx;
		font-size: 46rpx;
		font-weight: bold;
		color: #ffffff;
		line-height: 64rpx;
		text-align: center;

		&.small {
			font-weight: 36rpx;
		}
	}

	.device-number {
		margin-top: 19rpx;
		line-height: 23rpx;
		text-align: center;
		font-size: 23rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.result-wrap {
		padding-top: 92rpx;

		.result-image {
			margin: 0 auto;
			display: block;
			width: 354rpx;
			height: 418rpx;
		}

		.result-text {
			margin-top: 32rpx;
			font-size: 46rpx;
			color: #333333;
			font-weight: bold;
			text-align: center;
		}

		.device-number {
			font-size: 27rpx;
			color: #333333;
			margin-top: 55rpx;
		}
	}

	.next-btn {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 77rpx;
		margin: 0 auto;
		width: 465rpx;
		height: 85rpx;
		line-height: 85rpx;
		background: #1E64E1;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		border-radius: 15rpx;

		&.white {
			background: #FFFFFF;
			color: #1E64E1;
			bottom: 248rpx;
		}
	}

	.next-btn_1 {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 77rpx;
		margin: 0 auto;
		width: 465rpx;
		height: 85rpx;
		line-height: 85rpx;
		background: #FFFFFF;
		font-weight: 400;
		color: #1E64E1;
		text-align: center;
		border-radius: 15rpx;

		&.white {
			background: #FFFFFF;
			color: #1E64E1;
			bottom: 248rpx;
		}
	}

	.scan-btn-wrap {
		height: 200rpx;

		.scan-btn {
			margin: 0 auto;
			width: 465rpx;
			height: 85rpx;
			line-height: 85rpx;
			background: #1E64E1;
			font-weight: 400;
			color: #FFFFFF;
			text-align: center;
			border-radius: 15rpx;
		}
	}

	.scan-btn-test {
		height: 200rpx;

		.btn-content {
			margin: 0 auto;
			width: 465rpx;
			height: 85rpx;
			line-height: 85rpx;
			position: relative;

			.btn-text {
				width: 100%;
				height: 100%;
				background: #1E64E1;
				color: #FFFFFF;
				text-align: center;
				border-radius: 15rpx;
			}

			.flex {
				width: 100%;
				height: 100%;
				display: flex;
				position: absolute;
				top: 0;
				left: 0;

				.scan-btn {
					flex: 1;
					width: 50%;
					height: 85rpx;
					line-height: 85rpx;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}

		//.scan-btn {
		//  margin: 0 auto;
		//  width: 465rpx;
		//  height: 85rpx;
		//  line-height: 85rpx;
		//  background: #1E64E1;
		//  font-weight: 400;
		//  color: #FFFFFF;
		//  text-align: center;
		//  border-radius: 15rpx;
		//}
	}

	@media screen and (min-width: 375px) and (max-width: 500px) {
		.top-content {
			height: 500rpx;

			.step-image {
				margin-top: 20rpx;
			}
		}

		.content {
			&.short {
				.step-name {
					padding-top: 20px;
				}
			}

			.image-wrap {
				height: 450rpx;
			}
		}

		.countdown {
			width: 280rpx;
			height: 280rpx;
		}

		.reading-data {
			margin-top: 0rpx;

			&.small {
				font-size: 36rpx;
				line-height: 36rpx;
			}
		}
	}

	@media only screen and (max-width: 375px) {
		.content {
			.image-wrap {
				height: 480rpx;
			}
		}

		.top-content {
			.step-image {
				margin-top: 36rpx;
			}
		}

		.result-wrap {
			padding-top: 62rpx;
		}
	}
</style>